<!--
 * @Author: 千锋爱佛僧
 * @公众号: 大前端私房菜
 * @Slogan: 千锋精品教程，好学得不像实力派！
-->
<template>
  <div class="box">
    这是Test组件
    <h1>彩色文字</h1>
    <my-divider dash color="pink" orientation="center">
      <strong>这是自定义标题！！！</strong>
    </my-divider>
    <!-- 多菜单切换 -->
    <ul class="tab">
      <li
        v-for="(item, index) in tabArr"
        v-bind:class="tabIdx == index ? 'active' : ''"
        @click="tabIdx = index"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabArr: ["首页", "产品", "关于我们", "招聘"],
      tabIdx: 0,
    };
  },
};
</script>

<style lang="scss" scoped>
$my-color: orange;
.box {
  color: $my-color;
  h1 {
    color: $my-color;
  }
}
.tab {
  li {
    list-style: none;
    padding: 10px 30px;
    display: inline-block;
    background-color: #d8d8d8;
  }
  .active {
    background-color: orange;
    color: #fff;
  }
}
div {
  border: 3px solid red;
}
</style>
